<include file="assets/header" />

<title>{$title}</title>

<style>
    #app {
        width: 95%;
        /*height: 650px;*/
        margin: 10px auto;
        padding-top: 10px;
        border: 2px solid #cccccc;
    }

    .container {
        width: 600px;
        margin: 50px auto;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

</head>

<body style="min-width: 300px;max-width: 600px; margin: 0 auto;">

    <div id="app" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm" style="margin: 10px;">

            <el-form-item prop="user_login" label="{$userInfo.nickname}" >
                <!--el-image style="width: 60px; height: 60px" src="{$userInfo.avatar}" fit="fit"></el-image-->
                <el-avatar shape="square" size="medium" src="{$userInfo.avatar}"></el-avatar>

                <input type="hidden" id="nickname" ref="nickname" value="{$userInfo.nickname}" />
                <input type="hidden" id="avatar" ref="avatar" value="{$userInfo.avatar}" />
                <input type="hidden" id="union_id" ref="union_id" value="{$userInfo.union_id}" />
                <input type="hidden" id="openid" ref="openid" value="{$userInfo.openid}" />
                <input type="hidden" id="app_id" ref="app_id" value="{$userInfo.app_id}" />
                <input type="hidden" id="access_token" ref="access_token" value="{$userInfo.access_token}" />
                <input type="hidden" id="expire_time" ref="expire_time" value="{$userInfo.expire_time}" />
                <input type="hidden" id="third_party" ref="third_party" value="{$userInfo.third_party}" />

            </el-form-item>

            <el-form-item prop="user_login" label="姓名" :rules="[
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { type: 'string', message: '只能输入字符', trigger: ['blur', 'change'] },
                { min: 2, max: 9, message: '长度在 2 到 9 个字符', trigger: 'blur' } ]">
                <el-input v-model="form.user_login"></el-input>
            </el-form-item>

            <el-form-item prop="sex" label="性别" :rules="[
            { required: true, message: '特专员说没有无性别者', trigger: 'blur' }]">
                <el-radio-group v-model="form.sex" size="medium">
                    <el-radio border label="1">男</el-radio>
                    <el-radio border label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item prop="mobile" label="手机号码" :rules="[
            { required: true, message: '用于登录和核对用户，必填', trigger: 'blur' },
            { pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对', trigger:  ['blur', 'change'] },]">
                <el-input v-model="form.mobile"></el-input>
            </el-form-item>

            <el-form-item prop="birthday" label="出生日期" :rules="[
            { required: true, message: '请选择日期', trigger: 'blur' },
            { type: 'date', message: '请选择正确日期', trigger: ['blur', 'change']}]">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday"
                    style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item prop="zzjgValue" label="所属机构" :rules="[
            { required: true, message: '请选择机构', trigger: 'blur' },
            { type: 'array', message: '请选择正确日期', trigger: ['blur', 'change']}]">
                <el-cascader v-model="form.zzjgValue" :options="zzjgList" :props="{ multiple: true }"
                    @change="changeZzjgCasc" collapse-tags clearable></el-cascader>
            </el-form-item>

            <el-form-item prop="roleValue" label="选择职务" :rules="[
            { required: true, message: '请选择职务', trigger: 'blur' },
            { type: 'array', message: '请选择正确日期', trigger: ['blur', 'change']}]">
                <el-cascader v-model="form.roleValue" :options="roleList" :props="{ multiple: true }"
                    @change="changeRoleCasc" collapse-tags clearable></el-cascader>
                <!--el-checkbox-group v-model="form.roleValue">
                        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"  style="width:90px;height: auto;">
                        </el-checkbox>
                    </el-checkbox-group-->
            </el-form-item>

            <el-form-item prop="email" label="邮箱" :rules="[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
                <el-input v-model="form.email"></el-input>
            </el-form-item>

            <!--el-form-item label="密码" prop="pass" :rules="[
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min:6,max:30,message:'密码长度为 6 - 30 位', trigger: 'blur'} ]">
                <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass" :rules="[
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min:6,max:30,message:'密码长度为 6 - 30 位', trigger: 'blur'} ]">
                <el-input type="password" v-model="form.checkPass" autocomplete="off"></el-input>
            </el-form-item-->


            <el-form-item prop="signature" label="个性签名" :rules="[
            { type: 'string', message: '只能输入字符', trigger: ['blur', 'change'] },
            { min: 3, max: 15, message: ' 长度在 3 到 15 个字符', trigger: 'blur' } ]">
                <el-input v-model="form.signature"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button type="info"  @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>


    <script type="module" type="text/javascript" src="__PLUGIN_TMPL__/assets/userbind.js?ver2024111211"></script>

    <include file="assets/footer" />
</body>

</html>